<@app.html>
    <@app.head>
    <script>
        $(function () {
            $('#page_table').datagrid({
                fit: true,
                width: '100%',
                height: '100%',
                striped: true,
                pagination: true,
                url: "${contextPath}/security/hdw/item/page.htm",
                fitColumns: true,
                pageSize: 10,
                pageList: [10, 50, 100],
                idField: 'id',
                singleSelect: true,
                selectOnCheck: false,
                checkOnSelect: false,
                autoRowHeight: false,
                rowStyler: gridRowStyler,
                columns: [
                    [
                        {field: 'checkbox', checkbox: true},
                        {
                            title: '编号',
                            align: 'center',
                            field: 'orderNum',
                            width: 40,
                            formatter: function (val, row) {
                                var html = "<input type='text' style='width: 40px; height:15px; text-align: center;' id='order_num_ID' onblur='updateOrderNum(ID)' onkeypress='if(event.keyCode==13) {updateOrderNum(ID);return false;}' value=" + val + ">"
                                return html.replace(/ID/g, row.id);
                            }
                        },
                        {
                            title: '商品图片',
                            align: 'center',
                            field: 'imagePath1',
                            width: 60,
                            formatter: function (val, row) {
                                if (val) {
                                    return "<img style='width:20px; height:20px;' src='${controller.appConfig.staticUrl}" + val + "' />";
                                } else {
                                    return '';
                                }
                            }
                        },
                        {
                            title: '商品名称',
                            align: 'center',
                            field: 'itemName',
                            width: 60
                        },
                        {title: '价格(元)', align: 'center', field: 'price', width: 60},
                        {title: '换电金额(元)', align: 'center', field: 'exchangeMoney', width: 60},
                        {
                            title: '状态',
                            align: 'center',
                            field: 'status',
                            width: 60,
                            formatter: function (val, row) {
                                if (val == 1) {
                                    return '下架';
                                } else if (val == 2) {
                                    return '上架';
                                }
                            }
                        },
                        {
                            title: '操作',
                            align: 'center',
                            field: 'id',
                            width: 100,
                            formatter: function (val, row) {
                                var html = '<a href="javascript:view(ID)">查看</a>';
                                <@app.has_oper oper_code='4_1_3'>
                                    html += ' <a href="javascript:edit(ID)">修改</a>';
                                </@app.has_oper>
                                <@app.has_oper oper_code='4_1_4'>
                                    html += ' <a href="javascript:remove(ID)">删除</a>';
                                </@app.has_oper>
                                return html.replace(/ID/g, row.id);
                            }
                        }
                    ]
                ],
                onLoadSuccess: function () {
                    $('#page_table').datagrid('clearChecked');
                    $('#page_table').datagrid('clearSelections');
                }
            });
        })

        function category() {
            App.dialog.show({
                css: 'width:860px;height:512px;overflow:visible;',
                title: '分类',
                href: "${contextPath}/security/hdw/item_category/index.htm",
                event: {
                    onClose: function () {
                        var tree = $('#category_tree');
                        tree.tree('reload')
                    }
                }
            });
        }

        function reload() {
            var datagrid = $('#page_table');
            datagrid.datagrid('reload');
        }

        function query() {
            var tree = $('#category_tree');
            var datagrid = $('#page_table');

            var itemName = $('#item_name').val();
            var status = $('#status').combobox('getValue');
            var categoryId = tree.tree('getSelected');
            if (categoryId) {
                categoryId = categoryId.id || '';
            } else {
                categoryId = '';
            }

            datagrid.datagrid('options').queryParams = {
                itemName: itemName,
                status: status,
                categoryId: categoryId
            };

            datagrid.datagrid('load');
        }
        function add() {
            App.dialog.show({
                css: 'width:590px;height:390px;overflow:visible;',
                title: '新建',
                href: "${contextPath}/security/hdw/item/add.htm",
                event: {
                    onClose: function () {
                        reload();
                    }
                }
            });
        }
        function edit(id) {
            App.dialog.show({
                css: 'width:590px;height:390px;overflow:visible;',
                title: '修改',
                href: "${contextPath}/security/hdw/item/edit.htm?id=" + id,
                event: {
                    onClose: function () {
                        var datagrid = $('#page_table');
                        datagrid.datagrid('reload');
                    },
                    onLoad: function () {
                    }
                }
            });
        }
        function view(id) {
            App.dialog.show({
                css: 'width:590px;height:390px;overflow:visible;',
                title: '查看',
                href: "${contextPath}/security/hdw/item/view.htm?id=" + id
            });
        }
        function remove(id) {
            $.messager.confirm('提示信息', '确认删除?', function (ok) {
                if (ok) {
                    $.post("${contextPath}/security/hdw/item/delete.htm?id=" + id, function (json) {
                        if (json.success) {
                            $.messager.alert('提示消息', '操作成功', 'info');
                            reload();
                        } else {
                            $.messager.alert('提示消息', json.message, 'info');
                        }
                    }, 'json');
                }
            });
        }
        function updateOrderNum(id) {
            $.ajax({
                cache: false,
                async: false,
                type: 'POST',
                url: '${contextPath}/security/hdw/item/update_order_num.htm',
                dataType: 'json',
                data: {id: id, orderNum: $('#order_num_' + id).val()},
                success: function (json) {
                    <@app.json_jump/>
                    if (json.success) {
                        reload();
                    } else {
                        $.messager.alert('提示信息', json.message, 'info');
                    }
                }
            });
        }
    </script>
    </@app.head>
    <@app.body>
        <@app.container>
            <@app.banner/>
        <div class="main">
            <@app.menu/>

            <div class="content">
                <div class="panel ztree_wrap">
                    <div class="ztree">
                        <div class="ztree_head">
                            <@app.has_oper oper_code='4_2_1'>
                                <a class="a_red" href="javascript:category()">分类管理</a>
                            </@app.has_oper>
                            <h3>分类</h3>
                        </div>
                        <div class="ztree_body easyui-tree" id="category_tree"
                             url="${contextPath}/security/hdw/item_category/tree.htm?dummy=${'所有'?url}" lines="true"
                             data-options="
                                onBeforeSelect: App.tree.toggleSelect,
                                onClick: function(node) {
                                    query();
                                }
                            ">
                        </div>
                    </div>
                </div>
                <div class="panel search" style="margin-left:250px;">
                    <div class="float_right">
                        <button class="btn btn_yellow" onclick="query()">搜索</button>
                    </div>
                    <table cellpadding="0" cellspacing="0" border="0">
                        <tr>
                            <td align="right">名称：</td>
                            <td><input type="text" class="text" id="item_name"/></td>
                            <td align="right" width="60">状态：</td>
                            <td>
                                <select id="status" class="easyui-combobox" style="width: 140px; height: 28px;">
                                    <option value="">请选择</option>
                                    <option value="1">下架</option>
                                    <option value="2">上架</option>
                                </select>
                            </td>
                        </tr>
                    </table>
                </div>
                <div class="panel grid_wrap" style="margin-left:250px;">
                    <div class="toolbar clearfix">
                        <div class="float_right">
                            <@app.has_oper oper_code='4_1_2'>
                                <button class="btn btn_green" onclick="add()">新建</button>
                            </@app.has_oper>
                        </div>
                        <h3>商品信息</h3>
                    </div>
                    <div class="grid">
                        <table id="page_table"></table>
                    </div>
                </div>
            </div>
        </div>
        </@app.container>
    </@app.body>
</@app.html>